<script setup>
import { ref, watch } from 'vue'
import { useThemeSwitchStore } from '@/stores';
const { setActive } = useThemeSwitchStore()
const active = ref(false)
watch(
    () => active.value,
    (newValue) => {
        setActive(newValue)
    }
)
</script>

<template>
    <n-switch v-model:value="active" size="medium"
        style="--n-box-shadow-focus:0;--n-rail-color-active:#464649;--n-button-color:transparent;--n-button-box-shadow:0;box-shadow: 0 0 0 1px rgba(255,255,255,.3);border-radius: 12px;">
        <template #checked-icon>
            <i class="iconfont icon-yueliang"></i>
        </template>
        <template #unchecked-icon>
            <i class="iconfont icon-taiyang"></i>
        </template>
    </n-switch>
</template>

<style scoped lang="scss">
.icon-yueliang {
    color: #fff;
}

.icon-taiyang {
    color: #000;
}
</style>